<!DOCTYPE html>
<html>
<head>
    <title>Canvas</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/canvas.css?v=1.3">
</head>
<body>
	<div class="loading">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="home" style="display: none;">
		<img class="image-title" src="images/image-title.png">
		<img class="image-button" src="images/image-button.png">
	</div>
	<div class="canvas" style="display: none;">
		<canvas id="back"></canvas>
    	<canvas id="progress"></canvas>
		<canvas id="canvas"></canvas>
	</div>
	<div class="game-over" style="display: none;">
		<img class="success" src="images/success.png">
		<span class="results-text">你的成绩为：</span>
		<button class="game-button">返回</button>
	</div>
</body>
<script src="js/canvas.js?v=1.02"></script>
<script type="text/javascript">
    var img = [],
    	flag = 0,
    	backImageHeight,
	    pantArrLength = 0,
	    arrLength = 0,
	    mulitImg = [
	        'images/img.png',
	        'images/back-image.png',
	        'images/image1.png',
	        'images/image2.png',
	        'images/image7.png',
	        'images/image-title.png',
	        'images/image-start.png',
	        'images/image-button.png',
	        'images/light.png',
	        'images/success.png',
	    ],
	    imgTotal = mulitImg.length;
	const loading = document.getElementsByClassName('loading')[0];
	const home = document.getElementsByClassName('home')[0];
	const imageButton = document.getElementsByClassName('image-button')[0];
	const canvasView = document.getElementsByClassName('canvas')[0];
	const gameOver = document.getElementsByClassName('game-over')[0];
	const gameButton = document.getElementsByClassName('game-button')[0];
    for(let i = 0 ; i < imgTotal ; i++){
        img[i] = new Image();
        img[i].src = mulitImg[i];
        img[i].onload = function(){
            //第i张图片加载完成
            flag++;
            if( flag == imgTotal ){
                //全部加载完成
                backImageHeight = img[1].naturalHeight;
                loading.style.display = 'none';
                home.style.display = 'block';
            }
        }
    }
    imageButton.onclick = function () {
		gameOver.style.display = 'none';
    	home.style.display = 'none';
    	canvasView.style.display = 'block';
    	Canvas();
    }
    gameButton.onclick = function () {
    	gameOver.style.display = 'none';
    	canvasView.style.display = 'none';
    	home.style.display = 'block';
    }
    function Canvas() {
    	draw = new Draw(3);
        scenery = new Scenery();
        prop = new Prop();
        requestAnimationFrame(animate);  // 执行动画
        time = 0;
	    pantArrLength = 0;
	    arrLength = 0;
        resetTime(30);
    }
    //添加触摸事件的监听，并直行自定义触摸函数
	document.getElementById('canvas').addEventListener('touchstart',touchs,false);
	document.getElementById('canvas').addEventListener('touchmove',touchs,false);
	document.getElementById('canvas').addEventListener('touchend',touchs,false);
</script>
</html>